<template>
  <div class="relatedModelWrap" ref="userRelatedModel">
    <full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>
    <!--:filter-option="filterOption"-->
    <a-transfer
      :data-source="modelList"
      :rowKey="record => record.id"
      class="transferStyle"
      show-search
      :filter-option="filterOption"
      :target-keys="modelIds"
      :render="item => item.name"
      :titles="[$t('unconnectedModels'),$t('connectedModels')]"
      @change="handleChange"
      @search="handleSearch"
      :listStyle="{height:transferHeight}"
    />
  </div>
</template>
<script>
import modelApi from '@/api/modules/system/modelMana'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    FullParentDomWithDask
  },
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters(['drawerOpenTime'])
  },
  data () {
    return {
      modelList: [],
      modelIds: [],
      loading: false,
      transferHeight: '500px'
    }
  },
  watch: {
    drawerOpenTime: {
      handler () {
        this.resetData()
        this.initData()
      },
      immediate: true
    }
  },
  mounted () {
    this.getTransferHeight()
    window.addEventListener('resize', this.getTransferHeight)
  },
  methods: {
    initData () {
      this.loading = true
      Promise.all([this.getModelData(), this.getRelatedModelData()]).then(result => {
        this.modelList = result[0].data.map(item => {
          let name = item.code
          name += (item.name ? '[' + item.name + ']' : '')
          name += (item.trimLevel ? '[' + item.trimLevel + ']' : '')
          return {
            id: item.id,
            name
          }
        })
        this.modelIds = result[1].data.map(item => {
          return item.id
        })
      }).finally(() => {
        this.loading = false
      })
    },
    getModelData () {
      return modelApi.getMyAllModel({ selectAll: true, pageSize: 10000 })
    },
    // 获取已关联的车型
    getRelatedModelData () {
      return modelApi.getMyAllModel({ selectAll: false, uId: this.userId, pageSize: 10000 })
    },
    resetData () {
      this.modelIds = []
      this.modelList = []
    },
    filterOption (inputValue, option) {
      return option.name.indexOf(inputValue) > -1
    },
    handleChange (targetKeys) {
      this.modelIds = targetKeys
    },
    handleSearch (dir, value) {
      console.log('search:', dir, value)
      if (dir == 'left') {

      } else {

      }
    },
    getTransferHeight () {
      const dom = this.$refs.userRelatedModel
      if (dom) {
        const value = this.$refs.userRelatedModel.offsetHeight - 60
        this.transferHeight = (value < 300 ? 300 : value) + 'px'
      } else {
        this.transferHeight = '500px'
      }
    },
    // 获取表单中的数据
    getFormData () {
      return new Promise((resolve) => {
        const data = {
          modelIds: this.modelIds,
          userId: this.userId
        }
        resolve(data)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.relatedModelWrap {
    height: 100%;
}
</style>
